<%-- 
    Document   : Employee
    Created on : May 9, 2012, 9:28:43 AM
    Author     : Nguyen Hung
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>
<html>
    <head>

        <script type="text/javascript" language="javascript" src="../scripts/jQuery/confirm.js"></script>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/jquery.fancybox-1.3.4.pack.js"></script>
        <!-- -->
        <link rel="stylesheet" type="text/css" href="../css/thickbox.css"/>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/thickbox.js"></script>
        <link rel="stylesheet" type="text/css" href="../scripts/tabs/slidingtabs-horizontal.css">
        <script type="text/javascript" src="../scripts/tabs/slidetab.js"></script>
        <!-- -->
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/jquery.rateit.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/rateit.css">
        <script type="text/javascript" language="javascript">
            var open_cur = 0;
            $j = jQuery.noConflict();
            $j(document).ready(function(){             
                initThickBox('.thickbox');
                $j('.title_head').live('click',function(){
                    var id = $j(this).attr("lang");
                    $j('.item_content_care').slideUp();
                    if($j(this).parent().next().hasClass('active')){

                        $j('.item_content_care').removeClass('active');
                    }else{

                        $j('.item_content_care').removeClass('active');
                        $j(this).parent().next().addClass('active');
                        $j(this).parent().next().slideDown();
                        //alert("mail.jsp?status=R&ide="+id);
                        var t = $j(this);
                        $j.post("mail.jsp?status=R&ide="+id,function(){
                            t.removeClass("readed")
                            //alert(t.children(".title_head").children(".title_head_col2").find("img").attr("src"));
                            //t.next().next().find(".imageshow").attr("value", "../images/letter_open.png");
                            t.children(".title_head_col2").find("img").attr("src","../images/letter_open.png")
                        });
                    }
                });
                $j('.search_box').hide();       
                $j('.sidebar_search').live('click',function(){
                    $j('.search_box').hide();
                   
                   
                    if($j(this).next().hasClass('active')){

                        $j('.search_box').removeClass('active');
                    }else{

                        $j('.search_box').removeClass('active');
                        $j(this).next().addClass('active');
                        $j(this).next().show();
                    }
                });
                $j(".content_right").live("click",function(){
                    $j('.search_box').hide();
                });
                $j(".deleteitem").live("click",function(){
                    var a = $j(this).prev(".title_head");
                    var id = a.attr("lang");
                    var idq= a.attr("id");
                    //alert("mail.jsp?status=D&ide="+id+"&idq="+idq);
                    showPleaseWait();
                    $j.post("mail.jsp?status=D&ide="+id+"&idq="+idq,function(){
                        a.parent().addClass("disable")
                        a.parent().next(".item_content_care").addClass("disable")
                        hidePleaseWait();
                    });
                    //
                });
                $j(".restoreitem").live("click",function(){
                    var a = $j(this).prev().prev(".title_head");
                    var id = a.attr("lang");
                    var idq= a.attr("id");
                    //alert("mail.jsp?status=R&ide="+id+"&idq="+idq);
                    showPleaseWait();
                    $j.post("mail.jsp?status=R&ide="+id+"&idq="+idq,function(){
                        a.parent().addClass("disable")
                        a.parent().next(".item_content_care").addClass("disable")
                        hidePleaseWait();
                    });
                    
                });
         
                $j("#rateit5").bind('rated', function (event, value) { 
                  
                });
            });
        </script>
        <style type="text/css"> 
            body{
               
            }
            div.item_content_care,div.item_head_care
            {
                margin:0px;
                padding:5px;
                text-align:left;
                background:#D9DCDD;
                border:solid 1px #c3c3c3;
                width:905px;


            }
            div.item_head_care{
                cursor: pointer;
                float:left;
                width:905px;
                margin-top:2px;
            }
            div.item_line{
                height: 3px;
                width: 100%;
            }
            div.item_content_care
            {
                height:120px;
                display:none;
                float:left;
                width:905px;
                background: #fff;
            }
            div.chare_content{
                float:left;
                width:98%;
                height: auto;

            }
            .chare_content .chare_content_head{
                background:#586C7F; 
                float:left;
                height: 12px;
                padding:8px;
                width:12%;

            }
            .chare_content .chare_content_head span{
                font-size: 12px;
                color:#fff;


                text-transform: uppercase;
            }
            div.item_content_care {
                background: none repeat scroll 0 0 #FFFFFF;
                display: none;
                float: left;
                height: auto;
                width: 905px;
            }
            .item_work_content .item_work_content_row_content{
                width: 97%;
            }
            .item_work_content .item_work_content_row_head{
                width: 97%;

            }
            .item_work_content{
                margin-left: 20px;
            }
            .row1{
                width:345px;
            }
            div.rateit {
                -moz-user-select: none;
                display: inline-block;
                position: relative;
            }
            div.rateit div.rateit-reset {

                width:0px !important;
            }
            .title_head_row1{
                width: 40px;
                margin-right:0px !important; 
            }
            .maildetail{
                width: 100%;
                min-height: 23px;
                height: auto;
                
            }
            .mailtitle{
                width: 100px;
                float: left;
                text-align: right;
            }
            .mailcontent{
                width: 780px;
                float: left;
                font-weight: bold;
                padding-right: 5px;
            } 
            .action_cus{
                min-height: 60px;
                height: auto;
                background: #E0EFFC;
            }
            .readed{
                font-weight: bold;
                color: #0b77e3 !important;
               
            }
            .disable{
                display: none !important;
            }
            .deleteitem{
                z-index: 1000;
            }
            .title_head_{
                background: #B0BCC8;
                height: 30px;
            }
        </style>
    </head>


    <body>
        <f:loadBundle basename="#{environmentSession.localizationSource}" var="locale"/>
        <h:outputText value="<div class='permission' lang='#{loginSession.right.MNU_MAL_VIE}'></div>" escape="false"/>
        <div id="content">
            <div id="menu_top">
                <div class="dropdown">
                    <div class="select_choise">
                        <a href="#"><span>Khu vực</span></a>
                    </div>
                    <div class="select_hidden">
                        <ul>

                            <li><a href="#"><span>Filter Cấp 3</span></a></li>
                            <li><a href="#"><span>Filter Cấp 3</span></a></li>
                        </ul>
                    </div>
                </div>
                <div class="dropdown">
                    <div class="select_choise">
                        <a href="#"><span>Outlets</span></a>
                    </div>
                    <div class="select_hidden">
                        <ul>
                            <li><a href="#"><span>Ban Điều Hành</span></a></li>
                            <li><a href="#"><span>Nhóm IT</span></a></li>
                            <li><a href="#"><span>Filter Cấp 3</span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="content_detail">
                <!-- start sidebar sidebar_row1--->
                <%--
                <div class="sidebar_row1">
                    <div class="sidebar">
                      

                        <h:outputLink  rendered="#{loginSession.right.COM_LST_CRE}" value="inccuscompany.jsp?height=236px&width=405px" styleClass="fancybox add_new" id="fancybox">
                            <span> <h:outputText value="#{locale.addCustomer}"/></span>
                        </h:outputLink>

                    </div>
                </div>
                --%>
                <!-- end sidebar row1--->
                <!-- start sidebar row2--->
                <div class="sidebar_row2">
                    <div class="sidebar">
                        <div class="sidebar_search">
                            <span> <h:outputText value="#{locale.search}"/></span>
                        </div>
                        <div class="search_box" style="display:none;">
                            <form action="" method="get">
                                <h3><h:outputText value="#{locale.search}"/></h3>
                                <div class="fields_input">
                                    <input name="" type="text"  value="<h:outputText value="#{locale.search_key}"/>..." onblur="if(this.value=='')this.value='<h:outputText value="#{locale.search_key}"/>...';" onfocus="if(this.value=='<h:outputText value="#{locale.search_key}"/>...')this.value='';" />
                                    <input name="" type="submit" value="OK" />
                                </div>
                            </form>
                            <h4><h:outputText value="#{locale.advance_search}"/></h4>
                            <div class="fields_select">
                                <select name="">
                                    <option><h:outputText value="#{locale.group}"/> / <h:outputText value="#{locale.Departments}"/></option>
                                </select>
                            </div>
                            <div class="fields_select">
                                <select name="">
                                    <option><h:outputText value="#{locale.sex}"/>...</option>
                                </select>
                            </div>
                            <div class="fields_select">
                                <select name="">
                                    <option><h:outputText value="#{locale.position}"/>...</option>
                                </select>
                            </div>
                            <div class="fields_select">
                                <select name="">
                                    <option><h:outputText value="#{locale.income}"/>...</option>
                                </select>
                            </div>
                            <div class="fields_submit">
                                <input name="" type="submit" value="<h:outputText value="#{locale.search_option}"/>" />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- end sidebar row2--->
                <div class="fillter">
                    <h:form>
                        <div class="dropdown">
                            <div class="select_choise">
                                <h:outputLink value="mail.jsp"><span><h:outputText value="Email nội bộ"/></span>
                                </h:outputLink>
                            </div>
                            <div class="select_hidden">
                                <ul>
                                    <li> <h:outputLink value="mailExtend.jsp"><span><h:outputText value="Email Khách hàng"/></span>
                                        </h:outputLink>
                                    </li>
                                    <li> <h:outputLink value="mailClient.jsp"><span><h:outputText value="Email Sever"/></span>
                                        </h:outputLink>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </h:form>
                </div>
                <div class="content_right">

                    <a4j:form>
                        <div class="content">

                            <!-- Strart list Content -->
                            <div class="list_content">
                                
                                <div class="chare_content">
                                    <div class="chare_content_head"> <h:graphicImage style="margin-right:5px;" value="../images/qb_email_in_w.png" rendered="#{m575Bean.sttTitle=='I'}"/><h:graphicImage style="margin-right:5px;" value="../images/qb_email_out_w.png" rendered="#{m575Bean.sttTitle=='O'}"/><h:graphicImage style="margin-right:5px;" value="../images/qb_email_delete_w.png" rendered="#{m575Bean.sttTitle=='D'}"/><span><h:outputText value="#{m575Bean.mailBox}"/></span></div>
                                    <div class="title_head_" style="padding-top:10px;float:left;width:917px;font-size: 14px;">
                                        <div class="title_head_row1"><h:outputLink style="color:white"   value="mailInput.jsp?&KeepThis=true&amp;TB_iframe=true&amp;height=453&amp;width=741&amp;modal=true" styleClass="thickbox add_new" id="thickbox2"  > <img src="../images/qb_email_add.png" alt="Soạn thư" style="float:left;margin-left:15px;margin-right:5px;"/></h:outputLink></div>
                                            <div class="title_head_row1 inbox"> 
                                            <h:commandLink styleClass="inoutbox"> <img src="../images/qb_email_in.png" alt="Hộp thư đến" style="float:left;margin-left:8px;margin-right:5px;margin-top: 3px;"/>
                                                <f:param name="action" value="inbox"/>
                                                <f:param name="mv276" value="TO"/>
                                            </h:commandLink></div>
                                        <div class="title_head_row1 outbox"> 
                                            <h:commandLink styleClass="inoutbox"> <img src="../images/qb_email_out.png" alt="Thư đã gửi" style="float:left;margin-left:0px;margin-right:5px; margin-top: 3px;"/>
                                                <f:param name="action" value="outbox"/>
                                                <f:param name="mv276" value="FROM"/>
                                            </h:commandLink>
                                        </div>
                                        <h:commandLink styleClass="inoutbox"> <img src="../images/qb_email_delete.png" alt="Thư đã xóa" style="float:left;margin-left:5px;margin-right:5px;"/>
                                            <f:param name="action" value="delete"/>
                                            <f:param name="fm525" value="D"/>
                                        </h:commandLink>
                                    </div>

                                    <a4j:repeat value="#{m575Bean.listToFromMail}" var="item">
                                        <div  class="item_head_care ">
                                            <div class="title_head_col1" style="border-right:none;"><h:selectBooleanCheckbox></h:selectBooleanCheckbox></div>
                                            <div id="<h:outputText  value="#{item.fq100}" />" class="title_head <h:outputText  value="readed" rendered="#{item.fm525=='A'}" />" lang="<h:outputText value="#{item.pm275}" />" style="margin-top:1px;background: #D9DCDD;margin-right:5px;color:#777777;width:849px; float: left">
                                                
                                                <div class="title_head_col2" style="border-right:none;"><h:graphicImage  value="../images/letter.png" rendered="#{item.fm525=='A'}"/><h:graphicImage  value="../images/letter_open.png" rendered="#{item.fm525=='R'}"/></div>
                                                <div class="title_head_col3" style="border-right:none;">

                                                    <h:outputText value="#{item.hoten}" rendered="#{item.mv276=='TO'}"/>
                                                    <h:outputText value="#{item.tousserbrief}" rendered="#{item.mv276=='FROM'}"/>
                                                    <%--<h:outputText value="#{item.hoten}" rendered="#{item.fm525=='D'}"/>--%>
                                                </div>
                                                <div class="title_head_col4" style="border-right:none;width: 449px;" lang="<h:outputText value='#{item.pm575}'/>">

                                                    <h:outputText value="#{item.title}"/>

                                                </div>
                                                    <div class="title_head_col5" style="border-right:none; width: 20px;"></div>
                                                <div class="title_head_col6" style="border-right:none;width: 120px;"><h:outputText value="#{item.sendtime}"><f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss"/></h:outputText></div>
                                            </div>
                                                <div class="title_head_col7 deleteitem" style="border-right:none;width: 20px;<h:outputText value="display:none" rendered="#{item.fm525=='D'}"/>" ><img src="../images/delete_1.png" alt="Xóa mail"/></div>
                                                <div class="title_head_col7 restoreitem" style="border-right:none;width: 20px;<h:outputText value="display:none" rendered="#{item.fm525!='D'}"/>" ><img src="../images/email_go.png" alt="Phục hồi mail"/></div>
                                        </div>
                                        <div class="item_content_care">
                                            <div class="action_cus" style="float:left;padding-left: 10px;padding-bottom: 10px;text-align: justify;line-height: 23px; <h:outputText value="display:none"  rendered="#{m575Bean.mv276=='TO'}"/> ">
                                                <div class="maildetail"> 
                                                    <div class="mailtitle"> Người gửi : </div>
                                                    <div class="mailcontent"> <h:outputText value="#{item.hoten}" /> </div>
                                                </div>
                                                <div class="maildetail"> 
                                                    <div class="mailtitle"> Người nhận : </div>
                                                    <div class="mailcontent"> <h:outputText value="#{item.listrevice}" escape="false"/> </div>
                                                </div>
                                                <div class="maildetail"> 
                                                    <div class="mailtitle"> Tiêu đề : </div>
                                                    <div class="mailcontent"> <h:outputText value="#{item.title}" escape="false"/> </div>
                                                </div>
                                                <div class="maildetail"> 
                                                    <div class="mailtitle"> Ngày gửi : </div>
                                                    <div class="mailcontent"> <h:outputText value="#{item.sendtime}" escape="false"><f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss"/></h:outputText> </div>
                                                    </div>
                                                    

                                                </div>
                                                <div class="action_cus" style="float:left;padding-left: 10px;padding-bottom: 10px;text-align: justify;line-height: 23px; <h:outputText value="display:none"  rendered="#{m575Bean.mv276=='FROM'}"/> ">
                                                <div class="maildetail"> 
                                                    <div class="mailtitle"> Người gửi : </div>
                                                    <div class="mailcontent"> <h:outputText value="#{item.hoten}" /> </div>
                                                </div>
                                                <div class="maildetail"> 
                                                    <div class="mailtitle"> Người nhận : </div>
                                                    <div class="mailcontent"> <h:outputText value="#{item.listrevice}" escape="false"/> </div>
                                                </div>
                                                <div class="maildetail"> 
                                                    <div class="mailtitle"> Tiêu đề : </div>
                                                    <div class="mailcontent"> <h:outputText value="#{item.title}" escape="false"/> </div>
                                                </div>
                                                <div class="maildetail"> 
                                                    <div class="mailtitle"> Ngày gửi : </div>
                                                    <div class="mailcontent"> <h:outputText value="#{item.sendtime}" escape="false"><f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss"/></h:outputText> </div>
                                                    </div>
                                                    

                                                </div>    


                                                <div class="item_work_content">
                                                    <p style="float:left;"><h:outputText value="#{item.text}" escape="false"/></p>
                                            </div>
                                        </div>
                                    </a4j:repeat>



                                    <div class="item_line"></div>

                                </div>
                            </div>
                            <!-- End List Content-->    
                        </div>
                        <rich:modalPanel id="ajaxLoadingModalBox" minHeight="30" minWidth="40"
                                         height="30" width="40" zindex="2000">
                            <h:outputText value="#{locale.please_wait}" styleClass="startDummer"></h:outputText>
                        </rich:modalPanel>
                    </a4j:form>
                </div>
            </div>
        </div>

    </body>
</html>
